<template>
    <view>
        <positionContainerVue :show.sync="newShow" tBStyle="display: flex;justify-content: center;" tStyle="transform: translateX(0rpx)" @changeShow="changeShow">
            <template #slot-view>
                <view class="form-item" @click.stop="endChange">
                    <view class="label">
                        <view class="justify">
                            {{labelName || ''}}
                        </view>
                        ：
                    </view>
                    <view class="data">
                        <view v-show="newVal" class="val">
                            {{ setNewVal || '' }}
                        </view>
                        <view v-show="!newVal" class="pla_text">
                            请选择{{labelName || ''}}
                        </view>
                        <uni-icons class="icon " :class="{open: newShow,}" type="right" />
                    </view>
                </view>
            </template>
            <template #position-view>
                <view class="select-picker-box">
                    <view style="width: 290rpx;">
                        <customizePickerVue :pickerValue.sync="pickerValue1" :picker-column="pickerColumn" @bindChange="changePicker('pickerValue1',0)"/>
                    </view>
                    <view class="text">至</view>
                    <view style="width: 290rpx;">
                        <customizePickerVue :pickerValue.sync="pickerValue2" :picker-column="pickerColumn" @bindChange="changePicker('pickerValue2',1)"/>
                    </view>
                </view>
            </template>
        </positionContainerVue>
    </view>
</template>

<script>
    import customizePickerVue from '../../../components/customize-picker/customize-picker.vue';
    import positionContainerVue from '../../../components/position-container/position-container.vue';
    import { formatDateAdjusted } from '@/util/dateTimePicker.js';
  	import util from '@/utils/util';

    export default {
        props: {
            labelName: String,
            value: {
                type: String,
                default: '',
            },
            show: Boolean,
            selectList: {
                type: Array,
                default: () => []
            },
        },
        components: {
            positionContainerVue,
            customizePickerVue,
        },
        data() {
			const today = util.formatDate.format(new Date,'yyyy-MM');
            return {
                thisY: today.split('-')[0],
                today: today,
                newShow: false,
                newVal: '',
                pickerValue1: [],
                pickerValue2: [],
                temValues: ['',''],// 临时的选择的时间
                pickerColumn: [
                    {
                        suffix: '年',
                        key: 'y',
                        listKey: 'y',
                        list: [],
                    },
                    {
                        suffix: '月',
                        key: 'm',
                        listKey: 'm',
                        list: [],
                    },
                ]
            };
        },
        computed: {
            setNewVal(){
                const arr = [];
                this.newVal.split('|').forEach(v => {
                    arr.push(formatDateAdjusted(v));
                })
                return this.newVal && arr.join(' 至 ');
            },
            // setUpdate(){
            //     return 
            // },
        },
        watch: {
            show(val){
                this.newShow = val;
            },
            value: {
                handler(val){
                    console.log(val);
                    if (this.newVal !== val) {
                        this.newVal = val;
                        this.initPickerValue();
                    }
                },
                immediate: !0,
            },
            selectList: {
                handler(val){
                    // console.log(val);
                    this.initPickerColumn();
                },
                deep: !0,
                immediate: !0,
            },
        },
        mounted(){
        },
        methods: {
            changeShow(e){
                this.$emit('update:show',this.newShow);
                this.$emit('changeShow', this.newShow);
                if (!e) this.setValue();
            },
            endChange(){
                if (this.newShow) this.setValue();
                this.newShow = !this.newShow;
                this.$emit('update:show',this.newShow);
                this.$emit('changeShow', this.newShow);
            },
            generateSequence(count,initial = 0) {
                const init = Number(initial);
                return [...Array(count).keys()].map(i => {
                    const num = i + init;
                    const str = num < 10 ? `0${num}` : `${num}`;
                    return str;
                });
            },
            initPickerColumn(){
                const y = this.generateSequence(100, this.thisY - 49);
                const m = this.generateSequence(12,1);
                this.$set(this.pickerColumn[0],'list', y);
                this.$set(this.pickerColumn[1],'list', m);
                // console.log(this.pickerColumn);
                this.initPickerValue();
            },
            initPickerValue(){
                /* 没数据 就默认今天 */
                const newVal = this.value ? this.value.split('|') : [this.today,this.today];
                // console.log(newVal);
                newVal.forEach((v,i) => {
                    const lists = [];
                    const vItems = v && v.split('-') || [];
                    vItems.forEach((item, index) => {
                        const column = this.pickerColumn[index];
                        const list = column.list;
                        const length = list.length;
                        const findI = list.findIndex(find => String(find) === String(item));
                        lists.push(findI > -1 ? findI : length && length - 1);
                    })
                    this[`pickerValue${i + 1}`] = lists;
                })
            },
            setValue(){
                const temVal1 = [];
                const temVal2 = [];
                this.pickerValue1.forEach((v, i) => {
                    const str = this.pickerColumn[i].list[v];
                    temVal1.push(str);
                });
                this.pickerValue2.forEach((v, i) => {
                    const str = this.pickerColumn[i].list[v];
                    temVal2.push(str);
                });
                const val1 = temVal1.join('-');
                const val2 = temVal2.join('-');
                const val = [val1,val2].join('|');
                const date = new Date().getTime();
                const date1 = new Date(val1).getTime();
                const date2 = new Date(val2).getTime();
                let title;
                if (date1 > date) title = '开始时间不能大于现在';
                else if (date2 > date) title = '结束时间不能大于现在';
                else if (date1 > date2) title = '开始时间不能大于结束时间';
                if (title) {
                    uni.showToast({
                        title,
                        icon: 'none',
                        mask: !0,
                    })
                    return false;
                }
                this.$emit('update:value', val);
                return true;
            },
			changePicker(key){
				const temVal = [];
				this[key].forEach((v, i) => {
					const str = this.pickerColumn[i].list[v];
					temVal.push(str);
				});
                console.log(temVal);
                this.$emit('changePicker',{key,pickerVal: this[key],temVal});
			},
        }
    }
</script>

<style lang="less" scoped>
.select-picker-box {
	display: flex;
	align-items: center;
    justify-content: center;
}
</style>
